<template>
  <div class="role-container">
    <div class="rc-1">
      <!-- 按钮 -->
      <el-button v-permission="'arole'" type="primary" @click="dialogFormVisible = true">添加角色</el-button>
    </div>
    <div class="rc-2">
      <!-- 表格 -->
      <el-table
        :data="roleList"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="角色"
          width="180"
        >
          <template v-slot="{row}">
            <div v-if="row.isEdit">
              <el-input v-model="editForm.name" />
            </div>
            <div v-else>{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="启用"
          width="180"
        >
          <template v-slot="{row}">
            <div v-if="row.isEdit">
              <el-switch
                v-model="editForm.state"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
            <div v-else>{{ row.state == 1 ? '已启用' : '未启用' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
        >
          <template v-slot="{row}">
            <el-input v-if="row.isEdit" v-model="editForm.description" />
            <div v-else>{{ row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.isEdit">
              <el-button type="primary" size="small" @click="updataClick">确定</el-button>
              <el-button size="small" @click="row.isEdit=false">取消</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="small" @click="authorityTmp(row.id)">分配权限</el-button>
              <el-button type="text" size="small" @click="editRowTm(row)">编辑</el-button>
              <!-- <el-button type="text" size="small" @click="delClick(row.id)">删除</el-button> -->
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="confirm(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="rc-3">
      <!-- 分页符 -->
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :current-page="form.page"
        :page-size="form.pagesize"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 对话框组件 -->
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible" :modal-append-to-body="false" width="40%" @close="close">
      <el-form ref="ruleFormsdfs" :model="addForm" :rules="rules">
        <el-form-item label="角色名称" label-width="150px" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="启用" label-width="150px" prop="state">
          <el-switch
            v-model="addForm.state"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="角色描述" label-width="150px" prop="description">
          <el-input v-model="addForm.description" />
        </el-form-item>
        <el-form-item label-width="150px">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 权限对话框 -->
    <el-dialog
      v-if="dialogVisible"
      title="分配权限"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <span>
        <el-tree
          ref="tree"
          :data="treeList"
          :props="{label:'name'}"
          show-checkbox
          default-expand-all
          node-key="id"
        />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClickTmp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入封装的接口
import { getRoleRequest, setSysroleRequest, deleteSysroleRequest, updataSysRoleRequest, getassignPremRequest, updataassignPremRequest } from '@/api/role.js'
// 导入封装的接口
import { getpermissionRequest } from '@/api/permission.js'
// 导入封装的递归函数
import { getsome } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {
      roleList: [],
      form: {
        page: 1,
        pagesize: 5
      },
      // 总条数
      total: 0,
      dialogFormVisible: false,
      addForm: {
        name: '',
        description: '',
        state: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '角色名称长度为2-10位', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 2, max: 10, message: '角色描述长度为2-10位', trigger: 'blur' }
        ]

      },
      // 点击编辑显示的输入框数据
      editForm: {
        name: '',
        state: 1,
        description: ''
      },
      // 分配权限对话框
      dialogVisible: false,
      treeList: [],
      currerId: null

    }
  },
  // created钩子调用渲染页面方法
  created() {
    this.sysRoleRe()
  },
  methods: {
    // 点击分配权限
    authorityTmp(id) {
      this.currerId = id
      this.getpermissionList()
      this.dialogVisible = true
    },
    // 封装获取权限列表函数
    async getpermissionList() {
      const data = await getpermissionRequest()
      this.treeList = getsome(data.data, 0)
      const res = await getassignPremRequest(this.currerId)
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },
    // 点击权限确定
    async addClickTmp() {
      await updataassignPremRequest({
        id: this.currerId,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.sysRoleRe()
      this.dialogVisible = false
    },
    // 封装渲染页面方法
    async sysRoleRe() {
      const data = await getRoleRequest(this.form)
      this.roleList = data.data.rows
      this.total = data.data.total
      this.roleList.forEach(item => {
        this.$set(item, 'isEdit', false)
      })
    },
    // 点击页码/切换会触发
    handleCurrentChange(val) {
      this.form.page = val
      this.sysRoleRe()
    },
    // 点击空白/叉叉/取消触发
    close() {
      this.$refs.ruleFormsdfs.resetFields()
      this.dialogFormVisible = false
    },
    // 点击确定,校验+发送ajax
    submitForm() {
      this.$refs.ruleFormsdfs.validate(async valid => {
        if (valid) {
          // console.log(this.addForm)
          await setSysroleRequest(this.addForm)
          this.close()
          // 优化,用户添加完成刷新进入第一页
          this.form.page = 1
          this.sysRoleRe()
        }
      })
    },
    // 点击删除
    // async  delClick(id) {
    // console.log(id)
    // await deleteSysroleRequest(id)
    // 删除优化
    // if (this.total % this.form.pagesize === 1) {
    //   this.form.page--
    // }
    //   this.sysRoleRe()
    // },
    async confirm(id) {
      try {
        await deleteSysroleRequest(id)
        // 删除优化
        if (this.total % this.form.pagesize === 1) {
          this.form.page--
        }
        this.sysRoleRe()
      } catch (error) {
        console.log('删除失败')
      }
    },
    // 点击编辑
    editRowTm(row) {
      // 看需求,这个设置是只能点开一个编辑框
      // eslint-disable-next-line no-return-assign
      this.roleList.forEach(item => item.isEdit = false)
      // 点击显示编辑界面
      row.isEdit = true
      // 数据回显,因为对象里面是简单数据类型,所有使用浅拷贝
      this.editForm = { ...row }
    },
    // 点击确定,修改数据
    async updataClick() {
      await updataSysRoleRequest(this.editForm)
      // this.form.page = 1
      this.sysRoleRe()
    }
  }

}
</script>

<style lang="scss" scoped>
.role-container{
  padding: 30px 40px;
  .rc-2{
    margin: 20px 0;
  }
  .rc-3{
    text-align: right      ;
  }
}
</style>
